<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL 绘制一个渐变色</title>
</head>

<body>
    <canvas id="webglCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('webglCanvas');
        const gl = canvas.getContext('webgl');


        // 顶点着色器源代码  
        const vertexShaderSource = `  
        attribute vec2 a_position;  
        varying vec3 v_color; // 声明一个varying变量来传递颜色到片段着色器  
        
        void main() {  
            gl_Position = vec4(a_position, 0.0, 1.0); // 设置顶点位置  
            // 根据a_position.x计算颜色  
            float xColor = a_position.x * 0.5 + 0.5; // 映射到0.0到1.0的范围  
            v_color = vec3(1.0 - xColor, 0.5, xColor); // 创建从红色到绿色的渐变  
        }
        `;

        // 片段着色器源代码  
        const fragmentShaderSource = `
        precision mediump float;  
        varying vec3 v_color; // 接收从顶点着色器传递的颜色  
        
        void main() {  
            gl_FragColor = vec4(v_color, 1.0); // 直接使用从顶点着色器传递过来的颜色值  
        }
        `;

        // 创建着色器程序  
        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);

            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                console.error('Error compiling shader:', gl.getShaderInfoLog(shader));
                gl.deleteShader(shader);
                return null;
            }

            return shader;
        }

        // 创建并链接着色器程序  
        function createProgram(gl, vertexShader, fragmentShader) {
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);

            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
                console.error('Error linking program:', gl.getProgramInfoLog(program));
                gl.deleteProgram(program);
                return null;
            }

            return program;
        }

        // 设置顶点数据  
        const vertices = new Float32Array([
            -0.5, -0.5, // 左下角  
            0.5, -0.5, // 右下角  
            -0.5, 0.5,   // 顶部 
            0.5, 0.5   // 顶部  

        ]);

        // 创建顶点缓冲区  
        const vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        // 获取顶点着色器中的a_position属性位置  
        const program = createProgram(gl, createShader(gl, gl.VERTEX_SHADER, vertexShaderSource), createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource));
        gl.useProgram(program);

        const aPosition = gl.getAttribLocation(program, 'a_position');
        gl.enableVertexAttribArray(aPosition);
        gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);

        let u_resolution = gl.getUniformLocation(program, 'u_resolution');
        gl.uniform2fv(u_resolution, [400.0, 400.0]);

        // 清除画布并绘制三角形  
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length);
    </script>
</body>

</html>